<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="商品分类名称">
                <a-input v-model="queryParam.id" placeholder="请输入商品分类"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md=" 8 || 24" :sm="24">
              <a-button type="primary" @click="queryTable">查询</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-table :columns="columns" :dataSource="datas" :pagination="false">
        <a slot="name" slot-scope="text" href="javascript:;">{{ text }}</a>
        <span slot="tags" slot-scope="tags">
          <a-tag v-for="tag in tags" color="blue" :key="tag">{{ tag }}</a-tag>
        </span>
        <span slot="action" >
          <a href="javascript:;">编辑</a>
          <a-divider type="vertical"></a-divider>
          <a href="javascript:;">删除</a>
          <a-divider type="vertical"></a-divider>
          <a href="javascript:;" >上架</a>
        </span>
      </a-table>
      <my-pagination
        :total="pagination.totalCount"
        :pageSize="pagination.pageSize"
        :current="pagination.pageNo"
        @onChange="onChangePage"
        @onShowSizeChange="onShowSizeChangePage"
      ></my-pagination>
    </a-card>
  </div>
</template>

<script>
import MyPagination from '../../components/Autism/myPagination'
const columns = [
  {
    title: '名称',
    dataIndex: 'c_name',
    key: 'c_name'
  },
  {
    title: '英文名称',
    dataIndex: 'e_name',
    key: 'e_name'
  }, {
    title: '顺序',
    dataIndex: 'index',
    key: 'index'
  }, {
    title: '创建时间',
    key: 'create_time',
    dataIndex: 'create_time'
  }, {
    title: '上架状态',
    key: 'status',
    dataIndex: 'status',
    scopedSlots: { customRender: 'tags' }
  }, {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }]
const datas = [
  {
    key: 'my_table',
    c_name: '大米',
    e_name: 'rice',
    index: 1,
    create_time: ' 2019/09/08 10:22:30',
    status: ['上架', '下架']
  }
]
export default {
  name: 'StandardList',
  components: {
    MyPagination
  },
  data () {
    return {
      pagination: {
        pageNo: 1,
        pageSize: 10,
        totalCount: 0
      },
      currentTab: 0,
      queryParam: {},
      columns,
      datas
    }
  },
  beforeCreate () {},
  created () {
  },
  mounted () {},
  methods: {
    queryTable () {
    },
    onChangePage (pageNo, pageSize) {
      this.pagination.pageNo = pageNo
      // 重新请求数据
      console.log('on chang page :', pageNo, pageSize)
    },
    onShowSizeChangePage (pageNo, pageSize) {
      this.pagination.pageSize = pageSize
      // 重新请求数据
      console.log('on show size chang page :', pageNo, pageSize)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
